<template>
  <el-dialog title="工作区共享" :visible.sync="visiable">
    <el-select
        v-model="search"
        value-key="id"
        style="width:100%;"
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading"
        @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.username"
          :value="item">
          <span style="float: left">{{ item.username }}</span>
        </el-option>
      </el-select>

     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="用户">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visiable = false">取 消</el-button>
      <el-button type="primary" @click="save()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<style scoped>

</style>

<script>
import {search} from '@/api/user'
import {read, save} from '@/api/share'

export default {
  data() {
    return {
      workspaceId: '',
      search: '',
      visiable: false,
      loading: false,
      options: [],
      tableData: [{
          id: '1',
          username: 'LakNeumann'
        }, {
          id: '2',
          username: 'user01'
        }]
    }
  },
  methods: {
    open(id){
      let that = this
      this.dirId = id
      read(id).then(response => {
        that.tableData = response.data
        that.visiable = true
      })
    },
    remoteMethod(query) {
      let that = this
      if (query !== '') {
        this.loading = true;
        search(query).then(response => {
          that.options = response.data
          this.loading = false;
        })
      } else {
        this.options = [];
      }
    },
    onChange(e){
      var array = this.tableData
      for(var index in array){
        if(array[index].id === e.id) return
      }
      array.push({
        id: e.id,
        username: e.username
      })
      this.search = ''
    },
    onDelete(e){
      console.log(e.id)
    },
    save(){
      var param = {
        dirId: this.dirId,
        userList: this.tableData.map(item => {
          return item.id
        })
      }
      save(param)
        .then(response => {
          alert(response.message)
          this.visiable = false
        })
    }
  }
}
</script>
